<!doctype html>
<html lang="cn" xmlns:th="http://www.thymeleaf.org">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="/res/inspinia/css/bootstrap.min.css" rel="stylesheet">
    <link href="/res/inspinia/font-awesome/css/font-awesome.css" rel="stylesheet">
    <!-- Sweet Alert -->
    <link href="/res/inspinia/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
    <!-- bootstrap-table-->
    <link href="/res/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <!-- Toastr style -->
    <link href="/res/inspinia/css/plugins/toastr/toastr.min.css" rel="stylesheet">
    <!-- Sweet Alert -->
    <link href="/res/inspinia/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">

    <link href="/res/inspinia/css/animate.css" rel="stylesheet">
    <link href="/res/inspinia/css/style.css" rel="stylesheet">


    <title>发票</title>
</head>
<body class="mini-navbar fixed-sidebar">
<div id="wrapper">

    <div id="page-wrapper" class="white-bg">
        <div class="wrapper wrapper-content animated fadeInRight">
            <div class="row">
                <div class="col-12">
<!--                    <div class="ibox ">-->
<!--                        <div class="ibox-title">-->
<!--                            <h5>发票编辑</h5>-->
<!--                        </div>-->
<!--                        <div class="ibox-content">-->
                            <div class="row">
                                <div class="col-5 b-r"><h4>发票信息</h4>
                                    <form id="invoiceEdit_form">
                                        <div class="form-group">
                                            <label>单据号</label>
                                            <input class="form-control" id="invoiceEdit_recordCode" disabled>
                                        </div>
                                        <div class="form-group">
                                            <label for="invoiceEdit_recordOwner">报账人</label>
                                            <input class="form-control" id="invoiceEdit_recordOwner" th:value="${recordInfo.applyOwner}" disabled>
                                        </div>
                                        <div class="form-group">
                                            <label for="invoiceEdit_recordMoney">报账金额</label>
                                            <input class="form-control" id="invoiceEdit_recordMoney" th:value="${#numbers.formatDecimal(recordInfo.applyMoney,1,'COMMA',2,'POINT')}" disabled>
                                        </div>
                                        <div class="form-group">
                                            <label for="invoiceEdit_code">发票代码</label>
                                            <input class="form-control" id="invoiceEdit_code">
                                        </div>
                                        <div class="form-group">
                                            <label for="invoiceEdit_number">发票号码</label>
                                            <input class="form-control" id="invoiceEdit_number">
                                        </div>
                                        <div class="float-right">
                                            <button id="invoiceEdit_btn_save"
                                                    class="btn btn-primary m-t-n-xs" type="button">
                                                <strong>保存</strong></button>
                                            <button id="invoiceEdit_btn_scan"
                                                    class="btn btn-primary btn-outline m-t-n-xs" type="button">
                                                <strong>扫码</strong></button>
                                        </div>
                                    </form>
                                </div>
                                <div class="col"><h4>已设置发票</h4>
                                    <table id="invoiceEdit_table" class="table table-striped"></table>
                                </div>
                            </div>
<!--                        </div>-->
<!--                    </div>-->
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Mainly scripts -->
<script src="/res/inspinia/js/jquery-3.1.1.min.js"></script>
<script src="/res/inspinia/js/popper.min.js"></script>
<script src="/res/inspinia/js/bootstrap.js"></script>
<script src="/res/inspinia/js/plugins/metisMenu/jquery.metisMenu.js"></script>
<script src="/res/inspinia/js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<!-- Custom and plugin javascript -->
<script src="/res/inspinia/js/inspinia.js"></script>
<script src="/res/inspinia/js/plugins/pace/pace.min.js"></script>
<!--bootstrap-table-->
<script src="/res/bootstrap-table/bootstrap-table.min.js"></script>
<script src="/res/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<!-- Toastr script -->
<script src="/res/inspinia/js/plugins/toastr/toastr.min.js"></script>
<!-- Sweet alert -->
<script src="/res/inspinia/js/plugins/sweetalert/sweetalert.min.js"></script>
<!-- js-cookie -->
<script src="/res/js/js.cookie.min.js"></script>
<script type="text/javascript">
    $().ready(function () {
        invoiceEditObj.initForm();
        invoiceEditObj.initTable();
        toastr.options = {
            closeButton: false,
            debug: false,
            progressBar: true,
            preventDuplicates: false,
            positionClass: 'toast-top-right',
            onclick: null
        };
        $('#invoiceEdit_btn_scan').click(function () {
            invoiceEditObj.scanning();
        });
        $('#invoiceEdit_btn_save').click(function () {
            invoiceEditObj.saveItem();
        });
        $('#invoiceEdit_code').keyup(function (event) {
            if (event.which == 13) {
                event.preventDefault();
                invoiceEditObj.parseCode($(this).val());
            }
        })
    })
    const invoiceEditObj = new Object({
        dataForm: {
            firstCode: "",
            typeCode: "",
            code: "",
            number: "",
            money: "",
            timeStamp: "",
            checkCode: "",
            randomCode: "",
            recordCode: "[[${recordCode}]]"
        },
        scanning: function () {
            this.initForm();
            $('#invoiceEdit_code').focus();
            toastr.warning('请确认输入法为英文状态！', '请使用扫码枪扫码')
        },
        initForm: function () {
            $("#invoiceEdit_form")[0].reset();
            $("input[type='hidden']").val("");
            $("#invoiceEdit_form").find('#invoiceEdit_recordCode').val(this.dataForm.recordCode);
        },
        initTable: function () {
            $('#invoiceEdit_table').bootstrapTable({
                pagination: true,
                sidePagination: 'server',
                url: '/invoice/invoicedetail/list',
                formatNoMatches: function () {  //没有匹配的结果
                    return '暂无数据';
                },
                queryParams: function (param) {
                    param.recordCode = "[[${recordCode}]]";
                    param.page = param.pageNumber;
                    param.limit = param.pageSize;
                    return param;
                },
                columns: [{
                    title: '#',
                    align: 'center',
                    width: 50,
                    formatter: function (value, row, index) {
                        return index + 1;
                    }
                }, {
                    title: '发票代码',
                    field: 'code'
                }, {
                    title: '发票号码',
                    field: 'number'
                }, {
                    title: '操作',
                    align: 'center',
                    width: 50,
                    events: invoiceEdit_operateEvents,
                    formatter: invoiceEdit_operateFormatter
                }],
                responseHandler: function (res) {
                    return {
                        total: res.page.totalCount,
                        rows: res.page.list
                    };
                },
            });
        },
        parseCode: function (value) {
            let valueArr = value.split(",");
            if(valueArr.length > 0 && valueArr[valueArr.length-1] == ''){
                valueArr.pop();
            }
            if (valueArr.length != 8) {
                toastr.error('请确认输入法为英文状态！', '数据错误')
                return false;
            }
            this.dataForm.firstCode = valueArr[0];
            this.dataForm.typeCode = valueArr[1];
            this.dataForm.code = valueArr[2];
            this.dataForm.number = valueArr[3];
            this.dataForm.money = valueArr[4];
            this.dataForm.timeStamp = valueArr[5];
            this.dataForm.checkCode = valueArr[6];
            this.dataForm.randomCode = valueArr[7];
            $("#invoiceEdit_form").find('#invoiceEdit_code').val(this.dataForm.code);
            $("#invoiceEdit_form").find('#invoiceEdit_number').val(this.dataForm.number);
        },
        saveItem() {
            let _self = this;
            this.dataForm.code = $('#invoiceEdit_code').val();
            this.dataForm.number = $('#invoiceEdit_number').val();
            if (this.dataForm.recordCode == "") {
                $('#invoiceEdit_recordCode').parent().addClass("has-error");
                return false;
            }
            if (this.dataForm.code == "") {
                $('#invoiceEdit_code').parent().addClass("has-error");
                return false;
            }
            if (this.dataForm.number == "") {
                $('#invoiceEdit_number').parent().addClass("has-error");
                return false;
            }
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=UTF-8",
                headers: {
                    token: Cookies.get('token')
                },
                url: "/invoice/invoicedetail/save",
                data: JSON.stringify(this.dataForm),
                success: function (data) {
                    if(data.code == 0){
                        _self.initForm();
                        toastr.success(data.msg, '操作提示')
                        $('#invoiceEdit_table').bootstrapTable('refresh');
                    }else{
                        toastr.error(data.msg, '操作提示')
                    }
                }
            });

        }
    })
    window.invoiceEdit_operateEvents = {
        'click .trash': function (e, value, row, index) {
            swal({
                title: "操作确认",
                text: "确定要删除吗？",
                type: "warning",
                showCancelButton: true,
                confirmButtonClass: "btn btn-info btn-fill",
                confirmButtonText: "确定",
                cancelButtonClass: "btn btn-default btn-fill",
                cancelButtonText: "取消",
                closeOnConfirm: true,
            }, function (isConfirm) {
                if (isConfirm) {
                    let ids = [];
                    ids.push(row.id);
                    $.ajax({
                        type: "POST",
                        contentType: "application/json; charset=UTF-8",
                        url: "/invoice/invoicedetail/delete",
                        data: JSON.stringify(ids),
                        success: function (data) {
                            if(data.code == 0){
                                $('#invoiceEdit_table').bootstrapTable('refresh');
                            }
                        }
                    });
                }
            });
        }
    };

    function invoiceEdit_operateFormatter(value, row, index) {
        var opers = [];
        opers.push(`<a class="trash text-danger" title="删除" href="javascript:void(0)">
                        <i class="fa fa-trash"></i>
                    </a>`)
        return opers.join('');
    }
</script>
</body>
</html>